<template>
  <div>
    <el-tree 
    :data="allData" 
    :render-content="render" 
    default-expand-all 
    :expand-on-click-node ="false"></el-tree>
  </div>
</template>
<script>
import _ from "lodash";
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    directoryDrop:Array,
    fileDrop:Array,
    delete:Function
  },
  data() {
    return {
      allData: [],
      currentId:'', //当前点击元素的id
      currentContent:'' //保存当前输入的内容

    };
  },
  watch:{
      data(){
          this.transformData();
      }
  },
  methods: {
      isParent(data){
          return data.type =="parent"
      },
      handleCommand(data,value){
        if(value =='rn'){ //修改名字
            this.handleRename(data);
        }else if(value =='rm'){//删除
            this.handleRemove(data);
        }
      },
      handleRename(data){
            this.currentId = data.id;
            this.currentContent = data.label;
      },
      handleRemove(data){
        this.$confirm(`此操作将永久删除该文件${data.label}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              this.delete?this.delete(data.id).then(()=>{
                  this.remove(data)
              }) :this.remove(data); 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });         
      },
      remove(data){
          let lists = _.cloneDeep(this.data);
          lists =  lists.filter(l=>l.id!==data.id);
          this.$emit('update:data',lists);
          this.$message({
            type: 'success',
            message: '删除成功！'
          }); 
      },
      handleInput(v){
          this.currentContent = v;
      },
      ok(data){
          //把修改的数据传给父组件
          let lists = _.cloneDeep(this.data);
          let list = lists.find(l=>l.id ==data.id);
          list.label = this.currentContent;
          this.currentId = "";
          this.$emit('update:data',lists);
            this.$message({
              type: 'success',
              message: "修改成功！"
          });
      },
      cancel(){
          this.currentId = "";
      },
      render(h,{node,data,store}){   //jsx=js+xml  {}
           let list  = this.isParent(data)?this.directoryDrop:this.fileDrop; 
          return (
            <div style={{width:'100%'}}>
                {
                    this.isParent(data)?
                    node.expanded?<i class="el-icon-folder-opened"></i>:
                   <i class="el-icon-folder"></i>:
                   <i class="el-icon-document"></i>    
                 }
                 {
                   this.currentId ===data.id?
                   <el-input value={this.currentContent} on-input={this.handleInput}></el-input>  :
                     data.label
                     }
                 {
                this.currentId !==data.id ?<el-dropdown on-command={this.handleCommand.bind(this,data)} trigger="click">
                    <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                    {
                        list.map(item=>(
                            <el-dropdown-item command={item.text}>{item.value}</el-dropdown-item>
                        )) 
                    }
                    
                    </el-dropdown-menu>
                    </el-dropdown>:<span>
                        <el-button type="text" on-click={this.ok.bind(this,data)}>确定</el-button>
                        <el-button type="text" on-click={this.cancel}>取消</el-button>
                    </span>
                    
                    }

            </div>                
          )     
      },
    transformData() {
      let allData = _.cloneDeep(this.data);
      let treeMapList = allData.reduce((obj, current) => {
        current.label = current.label || current.name;
        obj[current["id"]] = current;
        return obj;
      }, {});
      //看每个对象中pid值是否跟treeMapList中id的值相等，若相等就说是children中的数据
      let result = allData.reduce((arr, current) => {
        let pid = current.pid;
        let parent = treeMapList[pid]; //拿父亲的数据
        if (parent) {
          parent.children
            ? parent.children.push(current)
            : (parent.children = [current]);
        } else if (pid === 0) {
          arr.push(current);
        }
        return arr;
      }, []);
      this.allData = result;
    }
  },
  mounted(){
      this.transformData();
  }
};
</script>
<style>
    .el-tree{
        width: 100%;
    }
    .el-tree .el-dropdown{
        float:right;
    }
    .el-tree .el-input{
        width: 50%;
    }
    .el-tree .el-tree-node__content{
        height:32px;
    }
</style>